<template>
  <div class="background">
    <div class="borderBackground">
      <!--        test-->
      <span>工单</span>
      <div id="test1" style="width:auto;height:400px;padding-top: 50px"></div>
    </div>
    <div id="test2" style="width:auto;height:400px;padding-top: 50px"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.getTest1Data()
    this.getTest1Data2()
  },
  methods: {
    // test1
    getTest1Data () {
      var myChart = this.echarts.init(document.getElementById('test1'))
      var optiontest1 = {
        textStyle: {
          color: '#1BB3E3'
        },
        tooltip: {
          trigger: 'none'
        },
        legend: {
          data: ['办结时长', '办结率'],
          textStyle: {
            color: '#fff'
          }
          // width: '10px'
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            boundaryGap: true,
            // 坐标轴名称与轴线之间的距离。好像没有用
            nameGap: 60,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一', '周一', '周一', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            // 刻度标签与轴线之间的距离。
            axisLabel: {
              margin: 28
            }
          },
          {
            type: 'category',
            boundaryGap: true,
            // 坐标轴轴线相关设置。
            axisLine: {
              show: true,
              // 设置坐标轴颜色
              lineStyle: {
                color: '#3C7DB9'
              }
            },
            // 坐标轴名称与轴线之间的距离。没用到
            nameGap: 60,
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            scale: true,
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#193F69']
              }
            }
          }
        ],
        series: [
          {
            name: '办结时长',
            // color: '#87a5f3',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#15D1EE' // 0% 处的颜色
              }, {
                offset: 1, color: '#0E85F6' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: '30%',
            itemStyle: {
              // （顺时针左上，右上，右下，左下）
              barBorderRadius: [50, 50, 0, 0]
            },
            data: [290, 900, 500, 300, 200, 210, 100, 800, 700, 1000, 290, 900, 500, 300, 200, 210, 100],
            showSymbol: true
          },
          {
            name: '办结率',
            type: 'line',
            color: '#1BB3E3',
            symbol: 'circle',
            itemStyle: {
              // 点边线颜色
              color: '#051A38',
              // 转折点描边颜色
              borderColor: '#1BB3E3',
              // 转折点描边宽
              borderWidth: 2
            },
            lineStyle: {
              // 线颜色
              color: '#1BB3E3'
            },
            symbolSize: 10,
            data: (function () {
              var res = [12, 13, 12, 11, 16, 18, 23, 11, 14, 13, 10, 12, 13, 12, 11, 16, 18]
              // var len = 0
              return res
            })()
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optiontest1)
    },
    //  test2
    getTest1Data2 () {
      var myChart = this.echarts.init(document.getElementById('test2'))
      var optiontest1 = {
        textStyle: {
          color: '#1BB3E3'
        },
        tooltip: {
          trigger: 'none'
        },
        legend: {
          data: ['办结时长', '办结率'],
          textStyle: {
            color: '#fff'
          }
          // width: '10px'
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            axisPointer: {
              // 自动吸附到最近的点
              snap: true
            },
            type: 'category',
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            boundaryGap: true,
            // 坐标轴名称与轴线之间的距离。好像没有用
            nameGap: 60,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一', '周一', '周一', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            // 刻度标签与轴线之间的距离。
            axisLabel: {
              margin: 28
            }
          },
          {
            type: 'category',
            boundaryGap: true,
            // 坐标轴轴线相关设置。
            axisLine: {
              show: true,
              // 设置坐标轴颜色
              lineStyle: {
                color: '#3C7DB9'
              }
            },
            // 坐标轴名称与轴线之间的距离。没用到
            nameGap: 60,
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            scale: true,
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 坐标轴轴线相关设置。
            axisLine: {
              show: false
            },
            // 坐标轴刻度相关设置。
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#193F69']
              }
            }
          }
        ],
        series: [
          {
            name: '办结时长',
            color: '#fff',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: '1',
            opacity: 0.1,
            itemStyle: {
              // （顺时针左上，右上，右下，左下）
              barBorderRadius: [50, 50, 0, 0]
            },
            // data: [{ value: 220, itemStyle: { normal: { barBorderColor: '#fff', barBorderWidth: 1, barBorderRadius: 0, borderType: 'dashed' } } }, 900, 500, 300, 200, 210, 100, 800, 700, 1000, 290, 900, 500, 300, 200, 210, 100],
            showSymbol: true
          },
          {
            name: '办结率',
            type: 'line',
            color: '#1BB3E3',
            symbol: 'circle',
            itemStyle: {
              // 点边线颜色
              color: '#051A38',
              // 转折点描边颜色
              borderColor: '#1BB3E3',
              // 转折点描边宽
              borderWidth: 2
            },
            lineStyle: {
              // 线颜色 xAxis: -1, yAxis: 400
              color: '#1BB3E3'
            },
            symbolSize: 10,
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              lineStyle: {
                color: '#fff'
              },
              data: [
                { xAxis: 1 },
                { xAxis: 3 },
                { xAxis: 4 },
                { xAxis: 7 }
              ]
            },
            data: [{
              value: 12,
              xAxis: 1,
              yAxis: 400
            }, 13, 12, 11, 16, 18, 23, 11, 14, 13, 10, 12, 13, 12, 11, 16, 18]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optiontest1)
    }
  }
}
</script>
<style>
  .background{
    height: 100%;
    background-image:url('../../assets/img/background1.png');
  }
  .borderBackground{
    /*margin-top: 50px;*/
    background-image:url('../../assets/img/borderImg.png');
  }
</style>
